<template>
	<div style='width:100%;height:100%'>
		<div class="draw_graph_header">
			<button @click='save'>保存</button>
			<button @click='back'>上一步</button>
			<button @click='next'>下一步</button>
			<button @click='zoomIn'>+</button>
			<button @click='zoomOut'>-</button>
			<button @click='print'>打印</button>
		</div>
		<div class="draw_graph_warp">
			<div class='draw_graph_toolbar'>
				<h6>基础图形</h6>
				<div id='draw_graph_toolbar_basic'></div>
				<h6>自定义图形</h6>
				<div id='draw_graph_toolbar_drap'>
					将元素拖到此处(图片)
				</div>
				<div id='draw_graph_toolbar_img'></div>
			</div>
			<div id="draw_graph_container">
			</div>
			<div id="outlineContainer" style="position:absolute;overflow:hidden;bottom:0px;right:0px;width:200px;height:140px;background:transparent;border-style:solid;border-color:black;">
			</div>
		</div>
	</div>
</template>
<script>
	import basic from './basic.js'
	import config from './utils/config.js'
	import defaultXml from "./utils/default.js"
	export default {
		name: "graph-editor",
		props: {

		},
		data() {
			return {
				graph: null,
				editor: null,
				model: null,
				undoManager: null,
				imgToolbar: null,
				basicToolbar: null,
				basic: [],
			};
		},
		mounted() {
			this.init();
			this.drag();
			this.basicToolbarInit();
			this.outline();
			this.createPopupMenu()
		},
		methods: {
			init() {
				let container = document.getElementById("draw_graph_container");
				container.style.background = 'url("")'
				var model = new mxGraphModel();
				this.graph = new Graph(container, model);
				//工具栏
				this.imgToolbar = new mxToolbar(document.getElementById("draw_graph_toolbar_img"));
				this.imgToolbar.enabled = false;
				this.basicToolbar = new mxToolbar(document.getElementById("draw_graph_toolbar_basic"));
				this.basicToolbar.enabled = false;
				//创建上下一步的对象
				this.undoManager = this.createUndoManager()
				// 设置风格样式themes default.xml文件
				let themsXml = mxUtils.parseXml(defaultXml);
				new mxCodec().decode(themsXml.documentElement, this.graph.getStylesheet());
			},
			//addVertex
			addVertex(icon, w, h, style, toolbar, imgbase64) {
				var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
				vertex.setVertex(true);
				this.addToolbarItem(this.graph, toolbar, vertex, icon, imgbase64)
			},
			//新增toolbar
			addToolbarItem(graph, toolbar, prototype, image, imgbase64) {
				var funct = function(graph, evt, cell) {
					graph.stopEditing(false);
					var pt = graph.getPointForEvent(evt);
					var vertex = graph.getModel().cloneCell(prototype);
					vertex.geometry.x = pt.x;
					vertex.geometry.y = pt.y;
					graph.setSelectionCells(graph.importCells([vertex], 0, 0, cell));
				}
				let toolbarImg;
				if (imgbase64) {
					toolbarImg = toolbar.addMode(null, image, funct);
				} else {
					toolbarImg = toolbar.addModeSvg(null, image, funct);
				}

				mxUtils.makeDraggable(toolbarImg, graph, funct);
			},
			//保存
			save() {
				var encoder = new mxCodec();
				var node = encoder.encode(this.graph.getModel());
				console.log(node)
			},
			//创建上下一步对象
			createUndoManager() {
				var graph = this.graph;
				var undoMgr = new mxUndoManager();
				graph.undoListener = function(sender, evt) {
					undoMgr.undoableEditHappened(evt.getProperty('edit'));
				};
				// Installs the command history
				var listener = mxUtils.bind(this, function(sender, evt) {
					graph.undoListener.apply(this, arguments);
				});
				graph.getModel().addListener(mxEvent.UNDO, listener);
				graph.getView().addListener(mxEvent.UNDO, listener);
				// Keeps the selection in sync with the history
				var undoHandler = function(sender, evt) {};
				undoMgr.addListener(mxEvent.UNDO, undoHandler);
				undoMgr.addListener(mxEvent.REDO, undoHandler);
				return undoMgr;
			},
			//上一步
			back() {
				this.undoManager.undo()
			},
			// 下一步
			next() {
				this.undoManager.redo()
			},
			zoomIn() {
				this.graph.zoomIn();
			},
			zoomOut() {
				this.graph.zoomOut();
			},
			print() {
				let preview = new mxPrintPreview(this.graph, 1);
				preview.autoOrigin = false;
				preview.printOverlays = true;
				preview.open();
			},
			// 右键菜单
			createPopupMenu() {
				//右键菜单
				this.graph.popupMenuHandler.factoryMethod = (menu, cell, evt) => {
					//取消默认的浏览器自带右键
					document.getElementById('draw_graph_container').oncontextmenu = (e) => {
						return false;
					};
					if (cell != null) {
						menu.addItem('删除', null, () => {
							this.graph.removeCells([cell])
						});
					}
				};
			},
			//拖曳
			drag() {
				//拖曳
				let dragContainer = document.getElementById('draw_graph_toolbar_drap');
				mxEvent.addListener(dragContainer, 'dragover', (evt) => {
					evt.preventDefault();
				});
				mxEvent.addListener(dragContainer, 'drop', (evt) => {
					evt.preventDefault();
					let file = event.dataTransfer.files[0]
					let reader = new FileReader();
					reader.readAsDataURL(file)
					reader.onload = (e) => {
						this.imgToolbarInit(e.target.result);
					}
				})
			},
			//基础toolbar图形渲染
			basicToolbarInit() {
				//渲染基础图形
				basic.map((item) => {
					this.addVertex(item.icon, item.w, item.h, item.value, this.basicToolbar, false);
				})
			},
			imgToolbarInit(e) {
				//自定义图形
				if (e) {
					let newImage = new Image();
					newImage.src = e;
					newImage.onload = () => {
						let width = this.maxImage(newImage.width, newImage.height, 120, 120).width;
						let height = this.maxImage(newImage.width, newImage.height, 120, 120).height
						//移出 ;base64	字符串，mxgraph做这个做了处理 真坑
						value = "shape=image;verticalLabelPosition=bottom;labelBackgroundColor=default;verticalAlign=top;aspect=fixed;imageAspect=0;image=" + newImage.src.replace(';base64', '');
						this.addVertex(newImage.src, width, height, value, this.imgToolbar, true);
					}
				}
			},
			//缩小比例图
			outline() {
				let outline = document.getElementById('outlineContainer')
				var outln = new mxOutline(this.graph, outline);
			},
			//图片按比例缩放一下
			maxImage(width, height, maxWidth, maxHeight) {
				// 用于设定图片的宽度和高度
				var tempWidth;
				var tempHeight;
				if (width > 0 && height > 0) {
					//原图片宽高比例 大于 指定的宽高比例，这就说明了原图片的宽度必然 > 高度
					if (width / height >= maxWidth / maxHeight) {
						if (width > maxWidth) {
							tempWidth = maxWidth;
							// 按原图片的比例进行缩放
							tempHeight = (height * maxWidth) / width;
						} else {
							// 按原图片的大小进行缩放
							tempWidth = width;
							tempHeight = height;
						}
					} else { // 原图片的高度必然 > 宽度
						if (height > maxHeight) {
							tempHeight = maxHeight;
							// 按原图片的比例进行缩放
							tempWidth = (width * maxHeight) / height;
						} else {
							// 按原图片的大小进行缩放
							tempWidth = width;
							tempHeight = height;
						}
					}
					let img = {
						width: tempWidth,
						height: tempHeight
					}
					return img
				}
			}
		}
	}

</script>

<style lang="less">
	.van-doc-content p {
		line-height: 0
	}

	.draw_graph_warp {
		width: 100%;
		height: 100%;
		display: flex;
		position: relative;
	}

	.draw_graph_header {
		button {
			cursor: pointer;
			background: #fff;
			border: 1px solid #dcdfe6;
			color: #606266;
			font-size: 14px;
			height: 36px;
			width: 60px;
			line-height: 36px;
		}
	}

	#draw_graph_container {
		/*		width: 80%;*/
		flex: 1;
		height: 100%;
		border: 1px solid #e8e8e8;
		touch-action: none;
		cursor: default;

	}

	.draw_graph_toolbar {
		width: 126px;
		height: 100%;
		border: 1px solid #e8e8e8;

		h6 {
			font-size: 14px;
			line-height: 40px;
			clear: both;
			text-align: center;
		}

		#draw_graph_toolbar_basic {
			width: 100%;
			height: 130px;
			border-bottom: 1px solid #e8e8e8;
			border-top: 1px solid #e8e8e8;

			div {
				width: 40px;
				margin-left: 2px;
				float: left;
			}
		}

		#draw_graph_toolbar_img {
			width: 100%;
			border-bottom: 1px solid #e8e8e8;
		}

		#draw_graph_toolbar_drap {
			clear: both;
			height: 120px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1px solid #e8e8e8;
			border-top: 1px solid #e8e8e8;
			cursor: default;
			font-size: 12px;
		}
	}

	.mxPopupMenu {
		position: absolute;

		table {
			background: white;
			border: 1px solid #dcdfe6;
			padding: 10px;
			/*			font-size: 12px;*/
			width: 100px;

			tr {
				display: block;
				cursor: pointer;
				color: #606266;
				text-align: center;
				width: 100%;
			}

			tr:hover {
				color: #409eff;
				border-color: #c6e2ff;
				background-color: #ecf5ff;
			}
		}
	}

	.mxToolbarMode {
		width: 40px !important;
	}

</style>
